<!--
 * @Author: Cenven
 * @Date: 2021-02-23 15:45:40
 * @Description: 北京泓深教育发展有限公司
 * @Descripttion: 
 * @version: @Lastest
 * @LastEditTime: 2021-07-22 10:44:48
 * @CopyRight: 北京泓深教育发展有限公司
-->
<template>
  <div class="page-mobile-group_booking">
    <van-tabs v-model="active" @change="handleTabChange" class="page-tab">
      <van-tab name="0" title="全部">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="'没有更多啦~'"
            @load="onLoad"
          >
            <order-card
              v-for="(item, index) in order_list"
              :detail="item"
              :key="'order_list' + index"
            >
            </order-card>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-tab name="1" title="正在拼单">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="'没有更多啦~'"
            @load="onLoad"
          >
            <order-card
              v-for="(item, index) in order_list"
              :detail="item"
              :key="'order_list' + index"
            >
            </order-card>
          </van-list> </van-pull-refresh
      ></van-tab>
      <van-tab name="2" title="已拼单">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="'没有更多啦~'"
            @load="onLoad"
          >
            <order-card
              v-for="(item, index) in order_list"
              :detail="item"
              :key="'order_list' + index"
            >
            </order-card>
          </van-list> </van-pull-refresh
      ></van-tab>
      <van-tab name="3" title="已过期">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="'没有更多啦~'"
            @load="onLoad"
          >
            <order-card
              v-for="(item, index) in order_list"
              :detail="item"
              :key="'order_list' + index"
            >
            </order-card>
          </van-list> </van-pull-refresh
      ></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getGroupBookingGroupsByCourse,getMyGroupBookingList } from "~/api/group-booking";
import { mapState, mapActions, mapMutations } from "vuex";
import OrderCard from "~/components/mobile/OrderCard.vue";

export default {
  components: {
    OrderCard
  },
  scrollToTop: true,
  data() {
    return {
      robotList:[
        {
          id:-10,
          acName:"横刀向天笑",
          avatar:"/img/robot/01.jpg",
        },
        {
          id:-11,
          acName:"细雨挽轻裳",
          avatar:"/img/robot/02.jpg",
        },
        {
          id:-12,
          acName:"沵要很爱涐゛",
          avatar:"/img/robot/03.jpg",
        },
        {
          id:-13,
          acName:"孤浪人",
          avatar:"/img/robot/04.jpg",
        },
        {
          id:-14,
          acName:"青春之帆由我掌舵",
          avatar:"/img/robot/05.jpg",
        },
        {
          id:-15,
          acName:"陈情匿旧酒",
          avatar:"/img/robot/06.jpg",
        },
        {
          id:-16,
          acName:"绿树青苔半夕阳",
          avatar:"/img/robot/07.jpg",
        },
        {
          id:-17,
          acName:"人间朝暮",
          avatar:"/img/robot/08.jpg",
        },
        {
          id:-18,
          acName:"相思赋予谁",
          avatar:"/img/robot/09.jpg",
        },
        {
          id:-19,
          acName:"日出代表晴天",
          avatar:"/img/robot/10.jpg",
        },
      ],
      active: "0",
      page: 1,
      pageSize: 10,
      total: 0,
      order_list: [], //订单列表
      loading: false, //上拉加载中
      refreshing: false, //下拉刷新中
      finished: true //上拉加载完成
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      web_info(state) {
        return state.web_info;
      },
      token(state) {
        return state.token;
      },
      is_hidden_content(state) {
        return state.is_hidden_content;
      },
      kl_md(state) {
        return state.kl_md;
      },
      THEME_COLOR_LIGHTER(state) {
        return state.THEME_COLOR_LIGHTER;
      }
    }),
    type() {
      return this.$route.query.type;
    }
  },
  watch: {},
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    initPage() {
      if (this.type) {
        this.active = this.type;
      }
      this.getGroupsByCourse(true);
    },
    //获取拼团团队
    async getGroupsByCourse(init) {
      this.SET_IS_LOADING(true);
      let params = {
        userId: this.user_info.id,
        // offset: this.pageSize * (this.page - 1),
        // limit: this.pageSize,
        sort: "creatTime desc",
        method: 1
      };
      if (this.active != "0") {
        params = {
          ...params,
          status: this.active
        };
      }
      let result = await getMyGroupBookingList(params);
      // console.log("获取拼团团队:", result);
      if (result && result.data && result.data.code == 200) {
        this.order_list = result.data.data.map(item=>{
          let userList = item.userList.map(value=>{
            if(value.id  < -9){
              let obj = this.robotList.find(robot=>{
                return robot.id == value.id
              })
              return {
                ...value,
                ...obj,
              }
            }else{
              return value;
            }
          })
          return {
            ...item,
            userList,
          }
        });
        this.total = result.data.data.length;
        // this.order_list = result.data.data;
        // const { rows, total, records } = result.data.data;
        // if (init) {
        //   this.order_list = [...rows];
        // } else {
        //   this.order_list = [...this.order_list, ...rows];
        // }
        // this.total = records;
      } else {
        
      }
      this.SET_IS_LOADING(false);
      this.finished = true;
      this.loading = false;
      this.refreshing = false;
    },
    //tap切换
    handleTabChange() {
      this.$router.replace({
        path: "",
        query: {
          type: this.active
        }
      });
      this.page = 1;
      this.total = 0;
      this.getGroupsByCourse(true);
    },
    //上拉加载
    onLoad() {
      if (this.order_list.length < this.total) {
        this.finished = true;
        this.loading = true;
        this.getGroupsByCourse();
      }
    },
    //下拉刷新
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.getGroupsByCourse(true);
    },
    destroyedPage() {}
  },
  created() {
    if (process.client) {
      if (!this.token && Object.keys(this.user_info).length == 0) {
        this.$router.replace("/m/login");
        return;
      }
    }
    // this.initPage();
  },
  deactivated() {
    this.destroyedPage();
  },
  activated() {
    if (process.client) {
      if (!this.token && Object.keys(this.user_info).length == 0) {
        this.$router.replace("/m/login");
        return;
      }
    }
    this.initPage();
  },
  destroyed() {
    this.destroyedPage();
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.page-mobile-group_booking {
  .order-card {
    height: 300vh;
  }
}
</style>
<style lang="scss">
.page-mobile-group_booking {
  .page-tab {
    .van-tabs__wrap {
      position: fixed;
      top: 0.9rem;
      left: 0;
      z-index: 10;
      width: 7.2rem;
      height: 0.765rem;
    }
    .van-tabs__content {
      position: relative;
      z-index: 9;
      margin-top: 0.765rem;
      .van-tab__pane {
        padding: 0.2rem 0;
        .component__order_card + .component__order_card {
          margin-top: 0.2rem;
        }
      }
    }
  }
  .van-pull-refresh {
    min-height: 60vh;
  }
}
</style>
